 <style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <Button type="error" @click="jumpPage('','CertificateAdd')">添加</Button>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <!--<div style="margin: 10px;overflow: hidden">-->
        <!--<div style="float: right;">-->
        <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
        <!--@on-change="changePage"></Page>-->
        <!--</div>-->
        <!--</div>-->
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                tableColumns: [
                    {
                        title: '值班编队名称',
                        key: 'teamName',
                        render: (h, params) => {
                            if (params.row.$isEdit) {
                                return h('input', {

                                    domProps: {
                                        value: params.row.value
                                    },
                                    on: {
                                        input: function (event) {
                                            params.row.value = event.target.value
                                        }
                                    }
                                });
                            } else {

                                return h('div', params.row.value);
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {

                            // return h('div', [
                            //         h('Button', {
                            //             props: {
                            //                 type: 'text',
                            //                 size: 'small'
                            //             },
                            //             style: {
                            //                 color: '#5cadff',
                            //                 'margin-right': '10px',
                            //             },
                            //             on: {
                            //                 click: () => {
                            //                     if (params.row.$isEdit) {
                            //                         this.handleSave(params.row)
                            //                     } else {
                            //                         this.handleEdit(params.row)
                            //                     }
                            //                 }
                            //             }
                            //         }, params.row.$isEdit ? '保存' : '编辑'),
                            //         h('Button', {
                            //             props: {
                            //                 type: 'text',
                            //                 size: 'small'
                            //             },
                            //             style: {
                            //                 color: '#ff3300',
                            //                 'margin-right': '10px',
                            //             },
                            //             on: {
                            //                 click: () => {
                            //                     console.log("id：", params.row.id);
                            //                     this.remove(params.row.id)
                            //                 }
                            //             }
                            //         }, '删除'),
                            //     ]

                            // )

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            handleEdit(row) {
                this.$set(row, '$isEdit', true)
            },
            handleSave(row) {
                this.$set(row, '$isEdit', false);

                this.tableEditSave(row);
                console.log('值:', row);

            },
            //行内编辑保存
            tableEditSave: function (row) {
                let that = this;
                let model = {
                    'id': row.id,
                    'teamName': row.value,
                };
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditZbTeamType, params, function (res) {
                    that.$Loading.finish();
                    that.mockTableData();
                });
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                            value: ''
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //列表总数据
            mockTableData() {
                let that = this;

                let para = {
                    teamType:this.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetZhiBanList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                    console.log('ressss:', res)
                });

            },
            //删除
            remove(index) {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除此记录`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {id: index};
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelZbTeamType, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
        },
    }
</script>